<template>
	<div class="bargain-info-container-overtime">
		<span>{{day | formatDate}}</span>
		<b>:</b>
		<span>{{hours | formatDate}}</span>
		<b>:</b>
		<span>{{minutes | formatDate}}</span>
		<b>:</b>
		<span>{{seconds | formatDate}}</span>
	</div>
</template>

<script>
	export default {
		name: "overTime",
		props: {
			date: {
				type: String,
				required: true
			}
		},
		data() {
			return {
				day: 0,
				hours: 0,
				minutes: 0,
				seconds: 0
			}
		},
		created() {
			this.timer = setInterval(this.overTime.bind(this), 1000);
		},
		methods: {
			overTime() {
				let nowTime = new Date().getTime();
				let time = new Date(this.date);
				time.setMonth(time.getMonth() + 1);
				time.setDate(1);
				time.setHours(0);
				time.setMinutes(0);
				time.setSeconds(0);
				let overTime = time.getTime();
				let leftTime = (overTime - nowTime) / 1000;
				this.day = parseInt(leftTime / 60 / 60 / 24);
				this.hours = parseInt(leftTime / 60 / 60 % 24);
				this.minutes = parseInt(leftTime / 60 % 60);
				this.seconds = parseInt(leftTime % 60);
			}
		},
		filters: {
			formatDate(value) {
				value = value + '';
				return value.padStart(2, '0');
			}
		},
		beforeDestroy() {
			clearInterval(this.timer);
		}
	}
</script>
